import './ect.css'
import { getEtcList, getETCseach, getParking, searchConditional, getYear } from '../../../../utils/api'
import { Table, Select, Message, Space, DatePicker, Form, Button, Typography, TreeSelect, Radio } from '@arco-design/web-react';
// 日期选择
import { useState, useEffect, useRef } from 'react';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
//表单选择



// ----------------------------------------请求
const Etc = () => {
    //下拉框数据
    const [options, setOptions] = useState([])

    const getparkingOptions = () => {
        getParking().then(res => {
            console.log('下拉框', res.result);
            setOptions(res.result)
        })
    }


    //列表渲染
    const getList = () => {
        //列表渲染
        getEtcList().then(res => {
            setData(res.result)
            console.log('列表渲染', res);
        })
    }


    // 查询数据
    const [seachvalue, setvalue] = useState([])
    const onValuesChange = (checkValue, values) => {
        setvalue(values)
    }
    const seach = () => {
        getETCseach(seachvalue).then(res => {
            // setvalue(res.result)
            console.log('onValuesChange: ', res);
            //查询回显
            setData(res.result)
        })
    }

    //日月年查询
    // 年月日---        罗老师已修改
    const [dateNow, setDateNow] = useState([])
    const RadioGroup = Radio.Group;
    const setSize = (value) => {
        setDateNow(value)
        console.log('DATANOW', value);
    }
    // const day = () => {
    //     getYear(dateNow).then(res => {
    //         setData(res.result)
    //         console.log('year', res);
    //     })
    // }
    // const week = () => {
    //     getYear(dateNow).then(res => {
    //         setData(res.result)
    //     })
    // }
    // const month = () => {
    //     getYear(dateNow).then(res => {
    //         setData(res.result)
    //     })
    // }
    // const year = () => {
    //     getYear(dateNow).then(res => {
    //         setData(res.result)
    //     })
    // }

    useEffect(() => {
        getparkingOptions()
        getList()
    }, [])


    // 表格数据
    const columns = [
        {
            title: '统计事件',
            dataIndex: 'statisticsTime',

        },
        {
            title: '停车场',
            dataIndex: 'parkingName',

        },
        {
            title: '本省储值卡',
            dataIndex: 'myProvinceCardMoney',

            sorter: (a, b) => a.myProvinceCardMoney - b.myProvinceCardMoney,
            filterMultiple: false,
        },
        {
            title: '外省储值卡',
            dataIndex: 'otherProvinceCardMoney',

            sorter: (a, b) => a.otherProvinceCardMoney.length - b.otherProvinceCardMoney.length,
        },
        {
            title: '储值卡总计',
            dataIndex: 'provinceMoney',

            sorter: (a, b) => a.provinceMoney.length - b.provinceMoney.length,
        },
        {
            title: '本省记账卡',
            dataIndex: 'myProvinceBookkeepingCard',

            sorter: (a, b) => a.myProvinceBookkeepingCard.length - b.myProvinceBookkeepingCard.length,
        },
        {
            title: '外省记账卡',
            dataIndex: 'otherProvinceBookkeepingCard',

            sorter: (a, b) => a.otherProvinceBookkeepingCard.length - b.otherProvinceBookkeepingCard.length,
        },
        {
            title: '记账卡总计',
            dataIndex: 'totalMoney',

            sorter: (a, b) => a.totalMoney.length - b.totalMoney.length,
        },
        {
            title: 'ETC总计',
            dataIndex: 'totalETC',

            sorter: (a, b) => a.totalETC.length - b.email.length,
        },

    ];



    //日期选择
    // const [dates, setDates] = useState([]);


    // 分页
    const [data, setData] = useState();
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [pagination, setPagination] = useState({
        sizeCanChange: true,
        showTotal: true,
        total: 15,
        pageSize: 5,
        current: 1,
        pageSizeChangeResetCurrent: true,
    });

    const [loading, setLoading] = useState(false);
    function onChangeTable(pagination) {
        const { current, pageSize } = pagination;
        setLoading(true);
        setTimeout(() => {
            setData((current - 1) * pageSize, current * pageSize);
            setPagination((pagination) => ({ ...pagination, current, pageSize }));
            setLoading(false);
        }, 1000);
    }


    const formRef = useRef();
    return <div className='top' style={{ backgroundColor: '#fff', padding: 10 }}>
        {/* 表上的选择器--下拉/日期/按钮 */}
        <Form 
            style={{ width: 1200, marginLeft: 20 }} 
            layout='inline' 
            onValuesChange={onValuesChange} 
            ref={formRef}>
            <FormItem label='停车场:' field='parkingId'>
                {/* 选择框--下拉菜单 */}
                {/* <Space size='large'> */}
                <Select
                    placeholder='please select'
                    options={options}
                    allowClear
                >

                </Select>
                {/* </Space> */}
            </FormItem>
            {/* 日期选择器 */}
            <FormItem label=' 起止日期:' style={{ marginLeft: 20 }} field='start'>
                <DatePicker style={{ width: 150 }} />

            </FormItem>
            <FormItem field='end' label='-'>
                <DatePicker style={{ width: 150 }} />
            </FormItem>


            {/* 按钮 */}
            <FormItem wrapperCol={{ offset: 5 }} layout='inline'>
                <Button onClick={seach} type='primary' htmlType='submit' style={{ marginRight: 24 }}>
                    查询
                </Button>
            </FormItem>
            <FormItem>
                <Button
                    style={{ marginRight: 24, display: 'inline' }}
                    onClick={() => {
                        // form.resetFields();
                    }}
                >
                    重置
                </Button>
                {/* <DemoButton /> */}
            </FormItem>


            {/* 年月日 */}
            <FormItem className='boxyear' field='type'>
                <RadioGroup
                    // rowKey='parkingId'
                    type='button'
                    onChange={setSize}
                    style={{ marginBottom: 20, marginLeft: 0 }}
                >
                    <Radio >日</Radio>
                    <Radio value='2'>周</Radio>
                    <Radio value='3'>月</Radio>
                    <Radio value='4'>年</Radio>
                </RadioGroup>
            </FormItem>
        </Form>

        {/* 分页 */}
        <Table
            // rowKey='parkingId'
            loading={loading}
            columns={columns}
            data={data}
            pagination={pagination}
            onChange={onChangeTable}
            rowSelection={{
                selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log('selectedRowKeys', selectedRowKeys);
                    console.log('selectedRows', selectedRows);
                    setSelectedRowKeys(selectedRowKeys);
                },
            }}
            renderPagination={(paginationNode) => (
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        marginTop: 10,
                    }}
                >
                    <Space>
                        <span style={{ marginLeft: 20 }}>Selected {selectedRowKeys.length}</span>
                    </Space>
                    {paginationNode}


                </div>


            )}


            // total总数
            summary={(currentData) => (
                <Table.Summary>
                    <Table.Summary.Row>
                        <Table.Summary.Cell>Total</Table.Summary.Cell>
                        <Table.Summary.Cell>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.myProvinceCardMoney, 0)}
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.otherProvinceCardMoney, 0)}
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.provinceMoney, 0)}
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.myProvinceBookkeepingCard, 0)}
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.otherProvinceBookkeepingCard, 0)}
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.totalMoney, 0)}
                        </Table.Summary.Cell>
                        <Table.Summary.Cell>
                            {currentData.reduce((prev, next) => prev + next.totalETC, 0)}
                        </Table.Summary.Cell>
                    </Table.Summary.Row>
                </Table.Summary>
            )}

        />



    </div>



};

export default Etc